<template>
<div class="mainState" >
  <div id="container">

  </div>
  <div id="scrollList">
    <dv-scroll-board class="scrollList_list" :config="scrollList.config" />
    <div class="scrollList_title">
      各邮箱数据流量
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import {computed, ComputedRef, onMounted, reactive} from "vue";
import api from "@/api";
import $bus from '@/utils/bus/index'
import * as echarts from 'echarts';
import {scrollSkin, skin} from "@/utils/interface";
import original from "@/views/homeView/skin/original";
import {useStore} from "vuex";
import {ComputedGetter} from "@vue/reactivity";

const store = useStore()
const skinMode:ComputedRef<skin> = computed(() => {
  return store.state.home.skinMode?store.state.home.skinMode:original
})

interface scroll<T> {
  config:{
    header?:string[]
    data:T,
    rowNum?:number,
    headerBGC:ComputedRef<string>,
    oddRowBGC:ComputedRef<string>,
    evenRowBGC:ComputedRef<string>
  }
}
let chartExample

const chartOption = {
  title:[
    {
      subtext:'各省份数据流量分布',
      left:'20%',
      bottom:20,
      textAlign:'center',
      subtextStyle:{
        color:'#fff',
        fontSize:16
      }
    },
    {
      subtext:'各IP数据流量分布',
      right:'20%',
      bottom:20,
      textAlign:'center',
      subtextStyle:{
        color:'#fff',
        fontSize:16
      }
    }
  ],
  grid:{
    right:20,
    left:'40%'
  },
  xAxis:[
    {
      gridIndex:0,
      type:'category'
    }
  ],
  yAxis:[
    {
      ype:'value',
      gridIndex:0,
    }
  ],
  series:[
    {
      type: 'pie',
      id:'province',
      radius: ['35%', '60%'],
      data: [],
      label: {
        position: 'outer',
        alignTo: 'none',
        bleedMargin: 5
      },
      width:'40%',
      left: 0,
      bottom: 20
    },
    {
      type:'bar',
      id:'IP',
      smooth: true,
      xAxisIndex:0,
      yAxisIndex:0,
      tooltip:{
        position:'top'
      }
    },

  ]
}
const scrollList = reactive<scroll<(string|number)[][]>>({
  config:{
    header:['邮箱','数据量','日期'],
    data:[],
    rowNum:6,
    headerBGC:computed(() => {return store.state.home.skinMode.scroll.headerBGC}),
    oddRowBGC:computed(() => {return store.state.home.skinMode.scroll.oddRowBGC}),
    evenRowBGC:computed(() => {return store.state.home.skinMode.scroll.evenRowBGC})
  }
})
onMounted(() => {
  chartExample = echarts.init(document.getElementById('container') as HTMLElement)
  chartExample.setOption(chartOption)
  requestEmailFlow()
  $bus.homeBus.on('updateHome',() => {
    requestIpFlow()
    requestProvinceFlow()
  })
})
//获取IP流量数据
const requestIpFlow = () => {
  api.chart.getIPFlow().then((data) => {
    chartExample.setOption({
      xAxis:{
        gridIndex:0,
        data:data.map((item) => {
          return item.ip
        })
      },
      series:{
        id:'IP',
        data:data.map((item) => {
          return [item.ip,item.value]
        })
      }
    })
  })
}
//获取各省份数据
const requestProvinceFlow = () => {
  api.chart.getProvinceFlow().then((data) => {
    chartExample.setOption({
      series:{
        id:'province',
        data:data.map((item) => {
          return {
            name:item.province,
            value:item.value
          }
        })
      }
    })
  })
}
//获取各协议数据量
const requestEmailFlow= () => {
  api.chart.getEmailFlow().then((data) => {
    scrollList.config.data = data.map((item) => {
      return [item.email,item.value,item.time]
    })
    scrollList.config = {... scrollList.config}
  })
}
</script>

<style scoped lang="scss">
.mainState{
  display: flex;
  padding: 20px 0 0 0;
  width: 100%;
  height: calc(100% - 20px);
  #container{
    width: 70%;
    height: 100%;
  }
  #scrollList{
    padding: 20px 0;
    width: calc(30% - 20px);
    height: calc(100% - 80px);
    .scrollList_title{
      margin-top: 8px;
      width: 100%;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>